extends /templates/base-flat

block content
  main.container-fluid#home-page
    section#top-banner.full-width
      .row
        .col-xs-12
          if view.banner
            span!=view.banner.display
          else if maintenanceStartTime && maintenanceStartTime.isAfter(moment().subtract(3, 'hours'))
            span(data-i18n="new_home.top_banner_blurb_maintenance", data-i18n-options=JSON.stringify(i18nData))
          else if me.isTeacher() && new Date("2023-02-13T06:00:00.000-05:00") < new Date() && new Date() < new Date("2023-02-16T14:30:00.000-08:00")
            span(data-i18n="new_home.top_banner_blurb_demo_day_2023_02_16")
            a(href="https://us06web.zoom.us/webinar/register/WN_Hdt7MY_3TtqR4JB96mM-RQ", data-i18n="league.register", data-event-action="Click: Homepage Banner Demo Day")
          else
            if me.isTeacher()
              span(data-i18n="new_home.top_banner_blurb_roblox_teachers")
              a(href="https://codecombat.com/roblox", data-i18n="new_home.learn_more", data-event-action="Click: Homepage Banner Roblox Page")
            else if me.isStudent() || (me.isHomeUser() && !me.isAnonymous())
              span(data-i18n="new_home.top_banner_blurb_roblox_players")
              a(href="https://codecombat.com/roblox", data-i18n="new_home.top_banner_blurb_roblox_players_cta", data-event-action="Click: Homepage Banner Roblox Page")
            else
              span(data-i18n="new_home.top_banner_blurb_roblox")
              a(href="https://codecombat.com/roblox", data-i18n="new_home.check_it_out", data-event-action="Click: Homepage Banner Roblox Page")
          //else
          //  span(data-i18n="new_home.top_banner_blurb_podcast")
          //  a(href="https://codecombat.com/podcast", data-i18n="new_home.learn_more", data-event-action="Click: Homepage Banner Podcast Page")
          //else
          //  span(data-i18n="new_home.top_banner_blurb_funding")
          //  a(href="/funding", data-i18n="new_home.learn_more", data-event-action="Click: Homepage Banner Funding Page")

    section.row#jumbotron-container-fluid
      .item-list
        img(src="/images/ozaria/home/ozaria_logo_sun.png" alt="Ozaria branding logo")
        h1(data-i18n="ozaria_home.subtitle" style="margin-bottom:15px;")
        h2.subtitle-mid(data-i18n="ozaria_home.heading_subtitle")
        if me.isTeacher()
          div
            a.btn.btn-primary.btn-large.btn-moon(href="/teachers/classes", data-i18n="new_home.go_to_my_classes")
          div
            a.btn.btn-primary.btn-large.btn-moon.modal-request-quote(data-i18n="new_home.request_quote")
        else if me.isStudent()
          a.btn.btn-primary.btn-large.btn-moon(href="/students", data-i18n="new_home.go_to_my_dashboard")
        else if me.isHomeUser() && !me.isAnonymous()
          div.update-account-blurb(data-i18n="ozaria_home.individual_account_warning" data-i18n-options=JSON.stringify({name: me.broadName()}))
          div
            a.btn.btn-primary.btn-large.btn-moon(href="/students/update-account", data-i18n="courses.update_account_update_student")
          div
            a.btn.btn-primary.btn-large.btn-moon(href="/teachers/update-account", data-i18n="courses.update_account_update_teacher")
        else
          p(data-i18n="ozaria_home.item_list_p")
          div
            button.btn.btn-primary.btn-large.btn-moon.teacher-btn(data-i18n="ozaria_home.im_an_educator" data-event-action="Click: I'm an Educator")
          div
            button.btn.btn-primary.btn-large.btn-moon.student-btn(data-i18n="ozaria_home.im_a_student" data-event-action="Click: I'm a Student")

    section#graphics-1
      .move-image
        img.code-graphic(src="/images/ozaria/home/code_graphic_1.png" loading="lazy" alt="hero and pet dog walking along grid with hero.moveLeft() code in speech bubble")
        img.code-graphic-mobile(src="/images/ozaria/home/code_graphic_1_mobile_new.png" loading="lazy" alt="hero and pet dog walking along grid with hero.moveLeft() code in speech bubble")
    #graphics-1-back

    .container
      .row.video-row
        .col-xs-12
          div.video-container
            iframe(src="https://iframe.videodelivery.net/4a2dba0208d65e1362fca88a5935b740?preload=false&poster=https://videodelivery.net/4a2dba0208d65e1362fca88a5935b740/thumbnails/thumbnail.jpg%3Ftime%3D1s&defaultTextTrack=en" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;"  allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture" allowfullscreen="true" title="Ozaria Classroom product overview video")

    section.section-spacer#engaging
      h1.heading-corner(data-i18n="ozaria_home.engaging_heading_corner" style="max-width: 727px; margin-bottom: 60px;")

      .row.flex-row
        .col-sm-7
          picture
            source(srcset="/images/ozaria/home/easy_implementation_graphic.webp" type="image/webp")
            img(src="/images/ozaria/home/easy_implementation_graphic.png" class="img-responsive" alt="teacher using Ozaria teacher dashboard")
        .col-sm-4.col-sm-offset-1
          h2(data-i18n="ozaria_home.engaging_row1_h2" style="margin-bottom: 20px;")
          p(data-i18n="ozaria_home.engaging_row1_p")
      .row.flex-row
        .col-sm-7.col-sm-push-5
          video(autoplay loop muted playsinline)
            source(src="/images/ozaria/home/gifs/gameplay_1.webm" type="video/webm")
            source(src="/images/ozaria/home/gifs/gameplay_1.mp4" type="video/mp4")
        .col-sm-4.col-sm-offset-1.col-sm-pull-7
          h2(data-i18n="ozaria_home.engaging_row2_h2" style="margin-bottom: 20px;")
          p(data-i18n="ozaria_home.engaging_row2_p")
      .row.flex-row
        .col-sm-7
          picture
            source(srcset="/images/ozaria/home/standards_aligned_graphic.webp" type="image/webp")
            img(src="/images/ozaria/home/standards_aligned_graphic.png" class="img-responsive" alt="student doing an encoding schemes puzzle in online classroom")
        .col-sm-4.col-sm-offset-1
          h2(data-i18n="ozaria_home.engaging_row3_h2" style="margin-bottom: 20px;")
          p(data-i18n="ozaria_home.engaging_row3_p")
      .row.flex-row
        .col-sm-7.col-sm-push-5
          picture
            source(srcset="/images/pages/pd/pd-if-then.webp" type="image/webp")
            img(src="/images/pages/pd/pd-if-then.png" class="img-responsive" loading="lazy" style="border: 10px solid #476FB1;" alt="")
        .col-sm-4.col-sm-offset-1.col-sm-pull-7
          h2(style="margin-bottom: 20px;") Professional Development
          p(data-i18n="[html]ozaria_home.pd_blurb", data-i18n-options=JSON.stringify(i18nData))

    section.full-width.section-spacer#back_cta_1
      button.btn.btn-primary.btn-large.btn-moon.try-chapter-1(data-i18n="ozaria_home.back_cta_1_a" data-event-action="Click: Try Chapter 1 CTA 1")

    section.section-spacer#speech-bubble-testimonial-1(style="padding-top:130px;")
      .row.xs-marg-15
        blockquote.col-sm-8(style="z-index: 1;")
          div(data-i18n="ozaria_home.speech_bubble_testimonial_1_blockquote")
          footer
            cite(class="name") Chris Beckwith
            cite(class="position") Technology Instructor, Reeds Brook Middle School
      .row
        .col-sm-6.crystal-art
          picture
            source(srcset="/images/ozaria/home/crystal-art.webp" type="image/webp")
            img(src="/images/ozaria/home/crystal-art.png" class="img-responsive" loading="lazy" alt="")
        .col-sm-6.chris-image
          img(src="/images/ozaria/home/testimonial_1.png" class="img-responsive" style="z-index: 0;" alt="Headshot of Technology Instructor")

    section#core-curriculum
      h1.heading-corner(data-i18n="ozaria_home.core_curriculum_header")
      p(data-i18n="ozaria_home.core_curriculum_p" style="margin-bottom: 40px;")

      .carousel-row
        #core-curriculum-carousel.carousel.slide(data-interval=8000 data-ride="carousel")
          .carousel-inner
            .item.active
              .row
                .col-sm-7
                  picture
                    source(srcset="/images/ozaria/home/carousel/carousel_1.webp" type="image/webp")
                    img(src="/images/ozaria/home/carousel/carousel_1.png" class="img-responsive" loading="lazy" alt="Slideshow image with heading text: Algorithms. Beneath heading a picture of baking ingredients and a maze.")
                .col-sm-5
                  h2(data-i18n="ozaria_home.core_curriculum_carousel_item1_header")
                  p(data-i18n="ozaria_home.core_curriculum_carousel_item1_p")
            .item
              .row
                .col-sm-7
                  picture
                    source(srcset="/images/ozaria/home/carousel/carousel_2.webp" type="image/webp")
                    img(src="/images/ozaria/home/carousel/carousel_2.png" class="img-responsive" loading="lazy" alt="Example lesson slide. Text says 'Map Design. Use the objects on the map & below to design your own maze.' Image of a blank grassy map with trees and rocks for student to place.")
                .col-sm-5
                  h2(data-i18n="ozaria_home.core_curriculum_carousel_item2_header")
                  p(data-i18n="ozaria_home.core_curriculum_carousel_item2_p")
            .item
              .row
                .col-sm-7
                  picture
                    source(srcset="/images/ozaria/home/carousel/carousel_3.webp" type="image/webp")
                    img(src="/images/ozaria/home/carousel/carousel_3.png" class="img-responsive" loading="lazy" alt="Example of cinematic. Close up of Vega character with speech bubble that says 'A sequence of code is what's called an algorithm. It's a bunch of steps that need to be completed in order.'")
                .col-sm-5
                  h2(data-i18n="ozaria_home.core_curriculum_carousel_item3_header")
                  p(data-i18n="ozaria_home.core_curriculum_carousel_item3_p")
            .item
              .row
                .col-sm-7
                  picture
                    source(srcset="/images/ozaria/home/carousel/carousel_4.webp" type="image/webp")
                    img(src="/images/ozaria/home/carousel/carousel_4.png" class="img-responsive" loading="lazy" alt="Screenshot of a practicel level. Level on the left with student's code on the right.")
                .col-sm-5
                  h2(data-i18n="ozaria_home.core_curriculum_carousel_item4_header")
                  p(data-i18n="ozaria_home.core_curriculum_carousel_item4_p")
            .item
              .row
                .col-sm-7
                  picture
                    source(srcset="/images/ozaria/home/carousel/carousel_5.webp" type="image/webp")
                    img(src="/images/ozaria/home/carousel/carousel_5.png" class="img-responsive" loading="lazy" alt="Screenshot of a capstone level. Story maker capstone where students construct a dialogue between characters.")
                .col-sm-5
                  h2(data-i18n="ozaria_home.core_curriculum_carousel_item5_header")
                  p(data-i18n="ozaria_home.core_curriculum_carousel_item5_p")


        .control-buttons
          button.press-engage.active(aria-label="Carousel Engage Item" data-target="#core-curriculum-carousel" data-slide-to="0")
          button.press-explore(aria-label="Carousel Explore Item" data-target="#core-curriculum-carousel" data-slide-to="1")
          button.press-explain(aria-label="Carousel Explain Item" data-target="#core-curriculum-carousel" data-slide-to="2")
          button.press-elaborate(aria-label="Carousel Elaborate Item" data-target="#core-curriculum-carousel" data-slide-to="3")
          button.press-evaluate(aria-label="Carousel Evaluate Item" data-target="#core-curriculum-carousel" data-slide-to="4")

      .row.flex-row.text-center.sm-mt-50(style="padding-top:20px;")
        a.btn.btn-primary.btn-large.btn-moon(data-i18n="ozaria_home.core_curriculum_scope_sequence" data-event-action="Click: View Scope and Sequence" href="https://docs.google.com/spreadsheets/d/1S7qS2zxVccBMVNUQ0Duh6ugyQfhqopGKaSXyhCf-5UA/edit#gid=137569977" target="_blank" rel="noopener")
        a.btn.btn-primary.btn-large.btn-moon(data-i18n="ozaria_home.core_curriculum_sample_lesson_slides" data-event-action="Click: View Sample Lesson Slides" href="https://docs.google.com/presentation/d/1KgFOg2tqbKEH8qNwIBdmK2QbHvTsxnW_Xo7LvjPsxwE/edit?usp=sharing" target="_blank" rel="noopener")

    section.section-spacer#global-community
      h1.smaller-38(data-i18n="ozaria_home.global_community_header")
      .row.xs-marg-15
        div(class="tree-art-asset")
          img(src="/images/ozaria/home/tree_art_asset.svg"  style="height: fit-content;" class="img-responsive" alt="Tree Art Asset")
        div(class="frame-art-asset")
          img(src="/images/ozaria/home/frame_art_asset.svg" style="height: fit-content;" class="img-responsive" alt="Frame Art Asset")
        .col-xs-12.col-sm-3
          img(src="/images/ozaria/home/global_img_1.svg" class="img-responsive" alt="Graphic of a graduate cap")
          h2 20 Million
          p(data-i18n="ozaria_home.global_community_row1_p")
        .col-xs-12.col-sm-3
          img(src="/images/ozaria/home/global_img_2.svg" class="img-responsive" alt="Graphic of computer")
          h2 1 Billion
          p(data-i18n="ozaria_home.global_community_row2_p")
        .col-xs-12.col-sm-3
          img(src="/images/ozaria/home/global_img_3.svg" class="img-responsive" alt="Graphic of an apple")
          h2 140,000
          p(data-i18n="ozaria_home.global_community_row3_p")
        .col-xs-12.col-sm-3
          img(src="/images/ozaria/home/global_img_4.svg" class="img-responsive" alt="Graphic of the earth")
          h2 190
          p(data-i18n="ozaria_home.global_community_row4_p")

    section#admin-dashboard
      h1.heading-corner(data-i18n="ozaria_home.admin_dashboard_header")
      p(data-i18n="ozaria_home.admin_dashboard_p")

      .row.flex-row
        .col-sm-7
          video(autoplay loop muted playsinline)
            source(src="/images/ozaria/home/gifs/curriculum_guide.webm" type="video/webm")
            source(src="/images/ozaria/home/gifs/curriculum_guide.mp4" type="video/mp4")
        .col-sm-4
          p.color-change(data-i18n="ozaria_home.admin_dashboard_row1_p")

      .row.flex-row
        .col-sm-7.col-sm-push-5
          video(autoplay loop muted playsinline)
            source(src="/images/ozaria/home/gifs/track_progress.webm" type="video/webm")
            source(src="/images/ozaria/home/gifs/track_progress.mp4" type="video/mp4")
        .col-sm-4.col-sm-pull-6
          p(data-i18n="ozaria_home.admin_dashboard_row2_p")

      .row.flex-row.text-center(style="width: 100%;")
        button.btn.btn-primary.btn-large.btn-moon.request-quote(data-i18n="ozaria_home.admin_dashboard_row3_a" data-event-action="Click: Request a Quote")

    section#acodus-awards
      .row
        .col-sm-5.acodus-transform
          picture
            source(srcset="/images/ozaria/home/acodus_with_code.webp" type="image/webp")
            img(src="/images/ozaria/home/acodus_with_code.png" class="img-responsive" alt="Fantasy laptop with code written on it to help hero traverse gap shown in the animation image.")
        .col-sm-7
          .row(style="text-align: center;padding-bottom:20px;")
            video(autoplay loop muted playsinline)
              source(src="/images/ozaria/home/gifs/crumble.webm" type="video/webm")
              source(src="/images/ozaria/home/gifs/crumble.mp4" type="video/mp4")
          .flex-row.row
            .col-md-4
              img(src="/images/ozaria/home/award_1.png" class="img-responsive" alt="Codie 2017 SIIA CodiE winner award")
            .col-md-4
              img(src="/images/ozaria/home/award_2.png" class="img-responsive" alt="2018 Top Pick for Learning award")
            .col-md-4
              img(src="/images/ozaria/home/award_3.png" class="img-responsive" alt="Member CS for All consortium")
      .row.flex-row(style="margin: 85px 0 130px;")
        button.btn.btn-primary.btn-large.btn-moon.try-chapter-1(data-i18n="ozaria_home.acodus_awards_a" data-event-action="Click: Try Chapter 1 CTA 2")


    section#speech-bubble-testimonial-2
      .row.xs-marg-15
        blockquote.col-sm-8.col-sm-offset-4
          div(data-i18n="ozaria_home.speech_bubble_testimonial_2_blockquote")
          footer
            cite(class="name") Alecia Nachtigal
            cite(class="position") Educator, Victoria School for Ideal Education
      .row
        .col-sm-6
          picture
            source(srcset="/images/ozaria/home/testimonial_2.webp" type="image/webp")
            img(src="/images/ozaria/home/testimonial_2.png" class="img-responsive" style="z-index: -1;transform: translateY(-40%);position: relative;" loading="lazy" alt="Headshot of Educator")
        .col-sm-6.crystal-art
          picture
            source(srcset="/images/ozaria/home/crystal-art.webp" type="image/webp")
            img(src="/images/ozaria/home/crystal-art.png" class="img-responsive" loading="lazy" alt="")

    section
      h1.heading-corner(data-i18n="ozaria_home.shareable_resources_header")
      p(data-i18n="ozaria_home.shareable_resources_p")

      picture
        source(srcset="/images/ozaria/home/shareable_resource.webp" type="image/webp")
        img(src="/images/ozaria/home/shareable_resource.png" class="img-responsive" loading="lazy" alt="Slide with following text. What is Ozaria? Flexible and personalized core computer science curriculum. Teaches authentic text-based coding in Python and Javascript. Highly engaging game-based learning. Self-paced and scaffolded instruction. Real world project-based applications. Promotes 21st Century Skills and lifelong learning behaviors.")
      .row.flex-row.text-center(style="justify-content: center; margin: 70px 0 100px;")
        a.btn.btn-primary.btn-large.btn-moon(data-event-action="Click: Download Presentation" style="margin: 20px;" href="https://docs.google.com/presentation/d/1ezuQZJMvb7IUHxvrYgihIbcTsbyhyKac8FgS30rVd_k/view" target="_blank" rel="noopener") Download Presentation
        a.btn.btn-primary.btn-large.btn-moon(data-i18n="ozaria_home.shareable_resources_a" data-event-action="Click: Download Flyer" style="margin: 20px;" href="https://drive.google.com/file/d/1T_UNIAN7v3gMJzOyyYAdbBoRTea1wkRp/view" target="_blank" rel="noopener")

    section.full-width#back_cta_2
      button.btn.btn-primary.btn-large.btn-moon.try-chapter-1(data-i18n="ozaria_home.back_cta_2_a" data-event-action="Click: Try Chapter 1 CTA 3")

    section#faq(style="padding-top: 130px;")
      h1.heading-corner(data-i18n="ozaria_home.faq_header" style="margin-bottom: 60px;")
      .row
        .col-sm-6
          h2(data-i18n="ozaria_home.faq_row1_header")
          p(data-i18n="ozaria_home.faq_row1_p")
        .col-sm-6
          h2(data-i18n="ozaria_home.faq_row2_header")
          p(data-i18n="ozaria_home.faq_row2_p")
        .col-sm-6
          h2(data-i18n="ozaria_home.faq_row3_header")
          p
            span(data-i18n="ozaria_home.faq_row3_p_part1")
            a.contact-us(data-i18n="general.contact_us", href="#")
            span(data-i18n="ozaria_home.faq_row3_p_part2")
            a(href="/funding" data-i18n="nav.funding_resources_guide")
            span(data-i18n="ozaria_home.faq_row3_p_part4")
        .col-sm-6
          h2(data-i18n="ozaria_home.faq_row4_header")
          p(data-i18n="ozaria_home.faq_row4_p")
        .col-sm-6
          h2(data-i18n="ozaria_home.faq_row5_header")
          p(data-i18n="ozaria_home.faq_row5_p")

        .col-sm-6
          h2(data-i18n="ozaria_home.dei_initiatives")
          p(data-i18n="[html]ozaria_home.dei_initiatives_blurb", data-i18n-options=JSON.stringify(i18nData))
        .col-sm-6
          h2(data-i18n="ozaria_home.ozaria_efficacy")
          p(data-i18n="[html]ozaria_home.ozaria_efficacy_blurb", data-i18n-options=JSON.stringify(i18nData))
        .col-sm-6
          h2(data-i18n="ozaria_home.social_learning")
          p(data-i18n="[html]ozaria_home.social_learning_blurb", data-i18n-options=JSON.stringify(i18nData))




      .row.text-center(style="margin: 60px 0 100px;")
        p
          span(data-i18n="ozaria_home.see_faq_prefix")
          span= " "
          a(href="https://codecombat.zendesk.com/hc/en-us" target="_blank" data-i18n="ozaria_home.see_faq_link")
          span(data-i18n="ozaria_home.see_faq_suffix")
        p
          span(data-i18n="ozaria_home.faq_row6_p_part1")
          a.contact-us(data-i18n="general.contact_us", href="#")
          | .
